<template>
  <div class="changeList">
    <div class="addLostTital">编辑</div>

    <label for="LF">
      <input id="LF" type="checkbox" v-model="LorF" />
      <span class="LF1">寻找失物</span>
      <span class="LF2">寻找失主</span>
      <div class="btn"></div>
    </label>

    <div class="name">
      <div class="tishi">
        <span>名字</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-mingpianzhengjian"></use>
        </svg>
      </div>

      <input type="text" v-model="name" />
    </div>

    <div class="tel">
      <div class="tishi">
        <span>联系方式</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-lianxi"></use>
        </svg>
      </div>

      <input type="text" v-model="tel" placeholder="可以联系到您的方式" />
    </div>

    <div class="des">
      <div class="tishi">
        <span>描述</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-describe"></use>
        </svg>
      </div>
      <textarea
        name=""
        id=""
        v-model="des"
        placeholder="请表明是寻物还是寻失主,并描述丢失物的特征、拾取时间以及您的联系方式,描述最大150字,感谢您的使用"
      ></textarea>
    </div>

    <button @click="change">提交</button>
    <div class="err" v-if="ifwanzheng">请填写完整</div>
  </div>
</template>

<script>
import { getLostListByNo, upList } from "@/api/api.js";

export default {
  data: function () {
    return {
      name: "",
      des: "",
      no: "",
      tel: "",
      LorF: '',
      ifwanzheng: false,
    };
  },
  methods: {
    LF: function () {
      if (this.LorF) {
        return "find";
      } else {
        return "lost";
      }
    },
    change: async function () {
      if (this.name != "" && this.des != "" && this.tel != "") {
        let L_F = this.LF();
        await upList(this.no, this.name, this.des, this.tel, L_F);
        this.$router.push("/user");
      } else {
        this.ifwanzheng = true;
        setTimeout(()=>{
          this.ifwanzheng = false
        },3000)
      }
    },
  },
  mounted: async function () {
    // console.log(this.$route.params.no);
    let result = await getLostListByNo(this.$route.params.no);
    // let btn = document.querySelector('.btn');
    // btn.style.transition = '0s'
    if(result.data.lostList[0].LorF == 'find'){
      this.LorF = true;
    }else{
      this.LorF = false;
    }
    // btn.style.transition = '0.3s'

    // console.log(result.data.lostList[0]);
    this.no = result.data.lostList[0].no;
    this.name = result.data.lostList[0].lostName;
    this.des = result.data.lostList[0].description;
    this.tel = result.data.lostList[0].tel;
    
  },
  watch:{
    ifwanzheng:function(){
      // console.log(this.ifwanzheng);
      if(this.ifwanzheng){
        let btn = document.querySelector("button")
        btn.style.marginBottom = '0';
        
      }else{
        let btn = document.querySelector("button")
        btn.style.marginBottom = '2rem';
      }
    }
  }
};
</script>

<style lang="less">
.changeList {
  min-width: 7.5rem;
  min-height: 100vh;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .addLostTital {
    letter-spacing: 0.1rem;
    padding-left: 0.1rem;
    text-align: justify;
    margin-top: 0.8rem;
    margin-bottom: 0.2rem;
    font-weight: bold;
    color: #192a56;
  }
  span {
  }
  .name {
    display: flex;
    flex-direction: column;
    input {
      width: 5rem;
      height: 1rem;
      border: none;
      background-color: #f5f6fa;
      outline: none;
      border: solid 0.04rem #273c75;
      border-radius: 0.5rem;
      padding-left: 0.4rem;
      padding-right: 1rem;
      overflow: hidden;
      font-size: 0.4rem;
      color: #273c75;
    }

    .icon {
      width: 0.65rem;
      height: 0.65rem;
      fill: #273c75;
    }
  }
  .tel {
    display: flex;
    flex-direction: column;
    input {
      width: 5rem;
      height: 1rem;
      border: none;
      background-color: #f5f6fa;
      outline: none;
      border: solid 0.04rem #273c75;
      border-radius: 0.5rem;
      padding-left: 0.4rem;
      padding-right: 0.4rem;
      overflow: hidden;
      font-size: 0.4rem;
      color: #273c75;
    }

    .icon {
      width: 0.58rem;
      height: 0.58rem;
      fill: #273c75;
    }
  }
  .des {
    display: flex;
    flex-direction: column;
    textarea {
      width: 5rem;
      height: 2.5rem;
      font-size: 0.3rem;
      border-radius: 0.5rem;
      outline: none;
      padding: 0.25rem;
      background-color: #f5f6fa;
      border: solid 0.04rem #273c75;
      color: #273c75;
    }
    textarea::-webkit-input-placeholder {
      color: #7f8fa6;
    }
    .icon {
      width: 0.5rem;
      height: 0.5rem;
      fill: #273c75;
    }
  }
  button {
    width: 4rem;
    height: 1rem;
    border: none;
    border-radius: 0.5rem;
    outline: none;
    background-color: #6851ac;
    color: white;
    font-size: 0.4rem;
    letter-spacing: 0.1rem;
    padding-left: 0.1rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    box-shadow: 0rem 0rem 0.2rem 0.1rem rgba(0, 0, 0, 0.1);
  }
  .tishi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem 0 0.3rem;
    margin-top: 0.35rem;
    margin-bottom: 0.15rem;
    span {
      color: #273c75;
      letter-spacing: 0.1rem;
    }
  }
  .err {
    margin-top: 0.2rem;
    color: #bf3030;
    font-size: 0.35rem;
    margin-bottom: 1.5rem;
  }


  label {
    margin-top: 0.5rem;
    padding: 0 0.4rem;
    width: 4rem;
    height: 1rem;
    background-color: #f5f6fa;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 0;
    box-shadow: 0 0 0.2rem 0.03rem rgba(0, 0, 0, 0.1);
    span {
      font-size: 0.35rem;
      position: relative;
      z-index: 3;
      &:nth-of-type(1) {
        color: white;
      }
    }

    .btn {
      position: absolute;
      width: 1.8rem;
      height: 0.8rem;
      z-index: 1;
      background-color: #273c75;
      border-radius: 0.5rem;
      top: 0.1rem;
      left: 0.2rem;
      // right: 0.2rem;
      box-shadow: 0.1rem 0rem 0.2rem 0.01rem rgba(0, 0, 0, 0.1);
    }
    input {
      display: none;
      position: absolute;
      top: -1rem;
      z-index: 5;
    }
    .LF1 {
      transition: 0.3s;
    }
    .LF2 {
      transition: 0.3s;
    }
    .btn {
      transition: 0.3s;
    }
    input[type="checkbox"]:checked ~ .LF1 {
      color: black;
    }
    input[type="checkbox"]:checked ~ .LF2 {
      color: white;
    }
    input[type="checkbox"]:checked ~ .btn {
      transform: translateX(1.8rem);
      // display: none;
      box-shadow: -0.1rem 0rem 0.2rem 0.01rem rgba(0, 0, 0, 0.1);
    }
  }
}
</style>